<script setup>
import { useHomePageStore } from "@/stores/homePage/index.js";
import axios from "axios";
import { ref, onMounted, watch } from "vue";
import userTitle from "@/components/userTitle.vue";
import { ElMessage } from "element-plus";
const userData = ref([]);
const name = ref("");
const name1 = name.value;
const introduce = ref("");
const introduce1 = introduce.value;

const drawer = ref(false);
const imgUrl = ref("/src/assets/images/avatars/点击.png");
const active = ref("");
const flag = ref(false);
const { getUserDate } = useHomePageStore();
onMounted(async () => {
  let res = await getUserDate();
  userData.value = res;
  active.value = userData.value.img.slice(27);
  if (!userData.value.name) {
    name.value = "这个学士还没有留下昵称";
  } else {
    name.value = userData.value.name;
  }
  if (!userData.value.introduce) {
    introduce.value = "这个很帅的学士没有留下什么···";
  } else {
    introduce.value = userData.value.introduce;
  }
});

const uploadData = async () => {
  if (!flag.value) {
    ElMessage.warning("信息没有什么变化");
  } else {
    await axios.patch(`http://localhost:3000/userList/${userData.value.id}`, {
      name: name.value == "这个学士还没有留下昵称" ? userData.value.name : name.value,
      introduce: introduce.value,
      img:
        imgUrl.value == "/src/assets/images/avatars/点击.png"
          ? userData.value.img
          : imgUrl.value,
    });

    setInterval(() => {
      window.location.reload();
    }, 500);
    ElMessage.success("ok呀你也是留下了什么");
  }
};
const changeImg = (item) => {
  active.value = item + ".png";
  imgUrl.value = "/src/assets/images/avatars/" + active.value;
  if (imgUrl.value != userData.value.img) {
    flag.value = true;
  }
};
const yesBtn = () => {
  drawer.value = false;
};
const inp = () => {
  if (name.value != name1) {
    flag.value = true;
  }
  if (introduce.value != introduce1) {
    flag.value = true;
  }
};
</script>

<template>
  <div class="personal">
    <userTitle>个人资料</userTitle>
    <ul>
      <li>
        <label for="name">昵称</label>
        <input type="text" id="name" v-model="name" @input="inp" />
      </li>
      <li>
        <span>用户名</span>
        <span>{{ userData.username }}</span>
      </li>
      <li>
        <span>用户ID</span>
        <span>{{ userData.id }}</span>
      </li>
      <li>
        <span>用户手机号</span>
        <span>{{ userData.phone }}</span>
      </li>
      <li>
        <span>头像</span>
        <img :src="userData.img" alt="靓仔" />
        <p>修改:</p>
        <img :src="imgUrl" alt="" @click="drawer = true" />
      </li>
      <li>
        <label for="introduce">个人描述</label>
        <textarea
          name=""
          id="introduce"
          cols="98"
          rows="2"
          placeholder="学士需要留下点什么吗~"
          v-model="introduce"
          @input="inp"
        ></textarea>
      </li>
    </ul>
    <div class="saveBtn" @click="uploadData">保存编辑</div>
    <el-drawer
      v-model="drawer"
      size="40%"
      direction="btt"
      title="I am the title"
      :with-header="false"
      custom-class="userDrawer"
    >
      <span>选择你喜欢的头像哦~</span>
      <ul class="userImg">
        <li v-for="item in 10" :key="item">
          <img
            :src="`/src/assets/images/avatars/${item}.png`"
            alt=""
            :class="active == item + '.png' ? 'active' : ''"
            @click="changeImg(item)"
          />
        </li>
      </ul>
      <div class="yesBtn" @click="yesBtn">确定</div>
    </el-drawer>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/homePage/user/personal/personal.scss");
</style>
